<style lang="scss" scoped>
.doc {
  background: #f3f1f1;
}

.header {
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  font-size: 0.83rem;
  font-weight: 400;
  background-color: rgba(243, 220, 169, 0.849);
  color: rgba(86, 62, 7, 0.849);
  padding-left: 1.5rem;
  position: relative;

  span {
    position: absolute;
    right: 1rem;
  }
}

.zhuye {
  width: 95%;
  height: 13rem;
  padding: 0.625rem;
  background: white;
  margin: 0.625rem;

  .top {
    width: 100%;
    display: flex;

    .left {
      width: 77%;
        
      .name {
        font-size: 0.88rem;
        font-weight: normal;
      }

      .hospital {
        font-size: 0.88rem;
        font-weight: 400;
        margin: 0.5rem 0;

        span {
          font-size: 1rem;
          color: #ccc;
        }
      }

      .pingfen {
        display: flex;
        height: 1.25rem;
        line-height: 1.25rem;
        // margin-left:1px;
        span {
          display: flex;
          margin-right: 10px;
        // margin-left:10px;
          p {
            font-size: 0.88rem;
            font-weight: 400;
          }

          img {
            width: 0.9375rem;
            height: 0.9375rem;
            margin-left:1px;
          }
        }

        .span::after {
          width: 0.5rem;
          height: 0.5rem;
          margin-top: 0.3rem;
          border-right: 0.0625rem solid #ccc;
          content: '|';
          color: transparent;
        }
      }
    }

    .right {
      width: 5rem;

      img {
        width: 5rem;
        height: 5rem;
        border-radius: 50%;
        border: 0.0625rem solid #ccc;
      }

      .gz {
        width: 3.9rem;
        background-color: rgb(213, 247, 222);
        color: rgb(27, 211, 150);
        font-size: 0.9rem;
        text-align: center;
        border-radius: 1.5rem;
        margin-left: 10px;
      }
    }
  }

  .bottom {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    left: 1rem;

    div {
      font-size: 10px;
      margin: 0.3em;
      margin-top: 20px;
      // background: #e4eef4;
      border: 1px solid #a7e2fe;
      color: rgb(44, 116, 224);
      padding: 0.3rem;
      background-color: #a7e2fe;
    }
  }
}

.p1 {
  display: flex;
  justify-content: space-around;

  span {
    color: #ccc;
    font-size: 0.88rem;
  }
}

.grid {
  display: flex;
  text-align: center;
  margin-left: 20px;
  margin-top: 10px;
  dl {
    padding: 1rem 0.625rem;
    background: white;
    border-radius: 0.3rem;

    dt {
      img {
        width: 2.5rem;
        height: 1.875rem;
      }
    }

    dd {
      .wenzhen {
        color: #ccc;
      }

      .jg {
        color: #ccc;
        font-size: 0.88rem;
      }
    }
  }
}

.wenzi {
  margin: 1rem 0.5rem;
  width: 95%;
  padding: 1rem 0.5rem;
  background: white;
}

.goodat {
  background: white;
  margin: 1rem 0.5rem;
  width: 95%;
  padding: 0.5rem;
  border-radius: 0.5rem;

  h3 {
    margin-bottom: 1rem;
  }

  div {
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

.pingjia {
  background: white;
  margin: 1rem 0.5rem;
  width: 95%;
  padding: 0.5rem;
  border-radius: 0.5rem;

  .fenlei {
    width: 75%;
    height: 6rem;
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.5rem;

    div {
      padding: 0.5rem;
      font-size: 0.89rem;
      background: #f1eeee;
      margin: 0.3em;
    }
  }

  .userpingjia {
    div {
      h4 {
        span {
          font-weight: normal;
        }

        .tu {
          background: #e4eef4;
          color: rgb(44, 116, 224);
          font-size: 0.8rem;
          margin-right: 0.3rem;
        }

        .wen {
          background: #f3e4a3;
          color: rgb(242, 45, 6);
          font-size: 0.8rem;
        }

        .date {
          position: absolute;
          right: 1.5rem;
          font-size: 0.85rem;
          color: #ccc;
        }
      }

      p {
        display: flex;
        flex-wrap: wrap;

        span {
          display: flex;
          margin: 0.2rem 0.6rem;
          color: #ccc;
        }
      }
    .userpingjia {
        div {
            h4 {
                span {
                    font-weight: normal;
                }

                .tu {
                    background: #e4eef4;
                    color: rgb(44, 116, 224);
                    font-size: .8rem;
                    margin-right: .3rem;
                }

                .wen {
                    background: #f3e4a3;
                    color: rgb(242, 45, 6);
                    font-size: .8rem;
                }

                .date {
                    position: absolute;
                    right: 1.5rem;
                    font-size: .85rem;
                    color: #ccc;
                }
            }

            p {
                display: flex;
                flex-wrap: wrap;

                span {
                    display: flex;
                    margin: .2rem .6rem;
                    color: #ccc;
                }

                .span::after {
                    width: 1rem;
                    height: .7rem;
                    margin-top: .3rem;
                    border-right: .0625rem solid #ccc;
                    content: "|";
                    color: transparent;
                }
            }

            .div {
                width: 95%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin: .5rem 0;
            }

            .wenti {
                padding: .6rem;
                background: #ebe8e8;
                color: #a09e9e;
                font-size: .93rem;
            }
        }
      }

      .div {
        width: 95%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0.5rem 0;
      }
      .wenti {
        padding: 0.6rem;
        background: #ebe8e8;
        color: #a09e9e;
        font-size: 0.93rem;
      }
    }
  }
}

.di {
    width: 100%;
    background-color: white;
    height: 5rem;
    position: fixed;
    bottom: 0;
    text-align: center;

    button {
        width: 80%;
        height: 3rem;
        border-radius: 1.5rem;
        border: none;
        background: #31cd2c;
        color: white;
    }
}

.active {
    border: 1px solid #31cd2c;
}
</style>
<template>
    <div>
        <div class="doc">
            <p class="header">已通过实名认证 ><span>执业资质已审核通过</span></p>
            <div class="zhuye">
                <div class="top">
                    <div class="left">
                        <h2>{{ doctor.name }}</h2>
                        <p class="name">{{ doctor.clinic_name }} {{ doctor.title }}</p>
                        <p class="hospital">{{ doctor.hospital_name }}
                            <span>></span>
                        </p>
                        <p class="pingfen">
                            <span class="span">
                                <h3>{{ doctor.service_data_list[0].descrip }}</h3>
                                <img :src="doctor.service_data_list[0].icon" alt="">
                            </span>
                            <span class="span">
                                <p>{{ doctor.service_data_list[1].name }}</p>
                                <h3>{{ doctor.service_data_list[1].descrip }}</h3>
                            </span>
                            <span>
                                <p>{{ doctor.service_data_list[2].name }}</p>
                                <h3>{{ doctor.service_data_list[2].descrip }}</h3>
                            </span>
                        </p>
                    </div>
                    <div class="right">
                        <img :src="doctor.image" alt="">
                        <div @click="gz(item)" class="gz">
                            {{ flag ? '取消关注' : '+关注' }}
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <div v-for="(item, index) in doctor.new_tags" :key="index">
                        {{ item.name }}
                    </div>
                </div>
            </div>
            <p class="p1">
                <span>保证医生真实</span>
                <span>未使用随时退</span>
                <span>不满意可申诉</span>
            </p>
            <div class="grid">
                <dl @click="tuwen(index)" :class="active === index ? 'active' : ''" v-for="(item, index) in consult"
                    :key="index">
                    <dt>
                        <img :src="item.img" alt="">
                    </dt>
                    <dd>
                        <p>{{ item.title }}</p>
                        <p class="jg">{{ item.price }}</p>
                    </dd>
                </dl>
            </div>
            <div class="wenzi">
                <div v-for="(item, index) in word" :key="index">
                    <p v-if="index === active">{{ item.title }}</p>
                </div>
            </div>
            <div class="goodat">
                <h3>擅长与简介</h3>
                <div v-html="doctor.good_at"></div>
            </div>
            <div class="pingjia">
                <h3>患者评价</h3>
                <div class="fenlei">
                    <div>阴道炎(135)</div>
                    <div>流产(124)</div>
                    <div>多囊卵巢综合症(69)</div>
                    <div>盆腔炎(50)</div>
                </div>
                <div class="userpingjia">
                    <div>
                        <h4>
                            173*******1
                            <span class="tu">图文</span>
                            <span class="wen">满意</span>
                            <span class="date">3月4日</span>
                        </h4>
                        <p>
                            <span class="span">
                                耐心细致
                            </span>
                            <span class="span">
                                讲解很清楚
                            </span>
                            <span class="span">
                                回复很及时
                            </span>
                            <span>
                                建议很有帮助
                            </span>
                        </p>
                        <div class="div">
                            张医生很好,很有耐心,爱心,是个值得信赖的好医生！
                        </div>
                        <div class="wenti">
                            问题描述：张医生，您好，我之前咨询过您。(女，31岁)
                        </div>
                    </div>
                    <div>
                        <h4>
                            180*******6
                            <span class="tu">图文</span>
                            <span class="wen">满意</span>
                            <span class="date">2月17日</span>
                        </h4>
                        <p>
                            <span class="span">
                                耐心细致
                            </span>
                            <span class="span">
                                讲解很清楚
                            </span>
                            <span class="span">
                                回复很及时
                            </span>
                            <span>
                                建议很有帮助
                            </span>
                        </p>
                        <div class="div">
                            医生很好,建议很有帮助,很有耐心,讲解详细，谢谢！
                        </div>
                        <div class="wenti">
                            问题描述:一直不孕,不知道什么原因,末次月经是上个月11号(女,26岁)
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="di">
            <div v-for="(item, index) in btn" :key="index">
                <button v-if="index === active" @click="handleClick(index)">
                    {{ item.title }}{{ item.price }}
                </button>
            </div>
        </div>
    </div>
    <div class="wenzi">
      <!-- <div v-if="!zixun">通过文字、图片、语音与医生一对一在线沟通</div> -->

      <van-collapse v-model="activeNames">
        <van-collapse-item title="通过文字、图片、语音与医生一对一在想沟通" name="3">
          <span>接诊后。咨询时效48小时.交互上限30次</span>
        </van-collapse-item>
      </van-collapse>
    </div>
    <!-- <van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '30%' }" /> -->
    <div class="goodat">
      <h3 style="font-weight: normal">擅长与简介</h3>
      <div v-html="doctor.good_at"></div>
    </div>
    <div class="pingjia">
      <h3 style="font-weight: normal">患者评价</h3>
      <div class="fenlei">
        <div>阴道炎(135)</div>
        <div>流产(124)</div>
        <div>多囊卵巢综合症(69)</div>
        <div>盆腔炎(50)</div>
      </div>
      <div class="userpingjia">
        <div>
          <h4>
            176*******1
            <span class="tu">图文</span>
            <span class="wen">满意</span>
            <span class="date">3月4日</span>
          </h4>
          <p>
            <span class="span"> 耐心细致 </span>
            <span class="span"> 讲解很清楚 </span>
            <span class="span"> 回复很及时 </span>
            <span> 建议很有帮助 </span>
          </p>
          <div class="div">张医生很好,很有耐心,爱心,是个值得信赖的好医生！</div>
          <div class="wenti">问题描述：张医生，您好，我之前咨询过您。(女，31岁)</div>
        </div>
        <div>
          <h4>
            159*******6
            <span class="tu">图文</span>
            <span class="wen">满意</span>
            <span class="date">2月17日</span>
          </h4>
          <p>
            <span class="span"> 耐心细致 </span>
            <span class="span"> 讲解很清楚 </span>
            <span class="span"> 回复很及时 </span>
            <span> 建议很有帮助 </span>
          </p>
          <div class="div">医生很好,建议很有帮助,很有耐心,讲解详细，谢谢！</div>
          <div class="wenti">问题描述:一直不孕,不知道什么原因,末次月经是上个月11号(女,26岁)</div>
        </div>
      </div>
    </div>
  </div>
  <div class="di">
    <button>图文咨询(￥20元/次)</button>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
import image1 from '@/assets/img/zixun3.png'
import image2 from '@/assets/img/zixun1.png'
import image3 from '@/assets/img/video_03.png'
import image4 from '@/assets/img/zixun4.png'
import axios from 'axios';
import router from '@/router'
const route = useRoute()
const myDoctor = ref<any>(JSON.parse(localStorage.getItem('doctor') || "[]"));
const flag = ref(false)
const zixun = ref(true)
const doctor = ref<any>([]);

const active = ref(0)
const consult = ref([
    {
        title: '图文咨询',
        price: '￥20元/次',
        img: image1,
        flag: true
    },
    {
        title: '电话咨询',
        price: '40元/次',
        img: image2,
        flag: false
    },
    {
        title: '视频咨询',
        price: '￥80元/次',
        img: image3,
        flag: false
    },
    {
        title: '视频咨询',
        price: '￥80元/次',
        img: image4,
        flag: false
    }
])
const word = ref([
    {
        title: '通过文字、图片、语音与医生一对一在线沟通',
        flag: true
    },
    {
        title: '通过电话与医生进行选定时长的沟通，可添加病情资料与图片',
        flag: false
    },
    {
        title: '与医生面对面视频资讯，问诊更放心',
        flag: false
    },
    {
        title: '预约就诊',
        price: '暂未开通',
    }
])
const btn = ref([
    {
        title: '图文咨询',
        price: '￥29元/次',
    },
    {
        title: '电话咨询',
        price: '￥40元/次',
    },
    {
        title: '视频咨询',
        price: '￥86元/次',
    },
    {
        title: '预约就诊',
        price: '暂未开通',
    }
])

onMounted(() => {
    console.log(consult);
})

const docdetail = ref([])

const getdetail = async () => {
    const res = await axios.get('/chunyu/docdetaillist')
    console.log(res.data.data);
    docdetail.value = res.data.data
}
getdetail()

const gz = (item: any) => {
    console.log(item.doctor_info.doctor_id);
    flag.value = !flag.value
    const items = myDoctor.value.find((items: any) => items.doctor_info.doctor_id !== item.doctor_info.doctor_id);
    console.log(items);

    if (item) {
        myDoctor.value.push([{ ...item, ...myDoctor.value }])
        console.log(myDoctor.value);
    }
    localStorage.setItem('doctor', JSON.stringify(myDoctor.value));


    // if (!flag.value) {
    //     console.log('取消关注');

    // } else {
    //     console.log('关注');
    //     let arrayString = JSON.stringify(doctor.value);
    //     localStorage.setItem('doctor', arrayString);
    //     let storedArrayString = localStorage.getItem("myFruitArray");
    //     // const list = localStorage.setItem('doctor', JSON.stringify(item.id))
    // }

    console.log(items)
}

const tuwen = (index) => {
    active.value = index
}

const handleClick=(index)=>{
    if(index==0){
        router.push({ path: '/word' })
    }else if(index==1){
        router.push({ path: '/phone' })
    }else if(index==2){
        router.push({ path: '/video'})
    }
}

const item = JSON.parse(route.query.item)
console.log(item.doctor_info)

doctor.value = item.doctor_info
</script>
